<template>
  <div>
    <el-row type="flex">
      <el-col
        :span="4"
        style="overflow-y: scroll"
        :style="{ height: heightTree }"
      >
        <el-tree
          style="margin-left: 10px; margin-top: 20px"
          :data="data"
          :props="defaultProps"
          @node-click="handleNodeClick"
        ></el-tree>
      </el-col>
      <el-col
        class="formWarp"
        :span="20"
        style="margin-left: 10px"
        :style="{ height: heightTree }"
      >
        <h2 style="text-align: center; font-size: 30px">
          大 组 工 网 网 站、电 子 邮 件 系 统 信 息 备 案 表
        </h2>
        <div
          style="display: flex; justify-content: flex-end; margin-right: 20px"
        >
          <el-button type="primary" plain @click="handlExport" size="medium"
            >导 出</el-button
          >
        </div>
        <div class="infohead">
          <p>
            填报单位:<input readonly v-model="fillingOrg" class="inputVal" />
          </p>
          <p>
            填表人:<input readonly v-model="fillingPerson" class="inputVal" />
          </p>
          <p>
            联系方式:<input readonly v-model="fillingTel" class="inputVal" />
          </p>
        </div>
        <div
          class="tableWarp"
          :style="{ height: heightTable }"
          style="overflow-y: scroll; margin-top: 10px"
        >
          <table border="1" class="myTable">
            <thead>
              <tr>
                <td
                  colspan="4"
                  style="text-align: left; font-size: 16px"
                  class="bgtd"
                >
                  一、大组工网网站
                </td>
              </tr>
              <tr>
                <td style="width: 313px" class="bgtd">
                  市级党委组织部网站名称
                </td>
                <td colspan="3">
                  <el-input readonly v-model="netName" />
                </td>
              </tr>
              <tr>
                <td class="bgtd">市级党委组织部网站域名/IP</td>
                <td colspan="3">
                  <el-input readonly v-model="netIp" />
                </td>
              </tr>
              <tr>
                <td class="bgtd">市级党委组织部网站部署情况</td>
                <td colspan="3">
                  <el-input readonly v-model="netArrange" />
                </td>
              </tr>
              <tr>
                <td class="bgtd">网络技术路线</td>
                <td>
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="netWay"
                    placement="top-start"
                  >
                    <el-input readonly v-model="netWay" />
                  </el-tooltip>
                </td>
                <td class="bgtd">管理制度</td>
                <td style="text-align: left">
                  <el-checkbox-group onclick="return false" v-model="isManage">
                    <el-checkbox label="1">有</el-checkbox>
                    <el-checkbox label="0">暂无</el-checkbox>
                  </el-checkbox-group>
                  <el-link type="primary" @click="hanldeClickOne" v-if="wzFlag"
                    >管理制度网站附件</el-link
                  >
                </td>
              </tr>
              <tr>
                <td class="bgtd">网站管理责任科(处)室</td>
                <td colspan="3">
                  <el-input readonly v-model="netOrg" />
                </td>
              </tr>
              <tr>
                <td class="bgtd">管理人员</td>
                <td colspan="3">
                  <div style="float: left">
                    <p class="classyang">
                      姓名：<el-input
                        readonly
                        v-model="personName"
                        style="width: 400px; text-align: right"
                      />
                    </p>
                    <p class="classyang">
                      单位及职务：<el-input
                        readonly
                        v-model="jobPost"
                        style="width: 400px; text-align: right"
                      />
                    </p>
                    <p class="classyang">
                      办公电话：<el-input
                        readonly
                        v-model="telPhone"
                        style="width: 400px; text-align: right"
                      />
                    </p>
                    <p class="classyang">
                      手机号码：<el-input
                        readonly
                        v-model="phone"
                        style="width: 400px; text-align: right"
                      />
                    </p>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="bgtd">分级保护通过时间</td>
                <td colspan="3">
                  <el-date-picker
                    readonly
                    style="float: left"
                    type="date"
                    v-model="protectTime"
                    value-format="yyyy-MM-dd"
                    format="yyyy-MM-dd"
                  />
                </td>
              </tr>
              <tr>
                <td class="bgtd">网站运维单位</td>
                <td>
                  <el-input readonly v-model="netOmOrg" />
                </td>
                <td class="bgtd">运维单位涉密资质</td>
                <td>
                  <el-input readonly v-model="netOmOrgSecret" />
                </td>
              </tr>
              <tr>
                <td class="bgtd">基础软硬件品牌型号</td>
                <td colspan="3">
                  <p class="flexStart">
                    <span>
                      服务器:<input
                        readonly
                        v-model="server"
                        class="inputCss"
                      />
                    </span>
                    <span>
                      CPU:<input readonly v-model="cpu" class="inputCss" />
                    </span>
                    <span>
                      操作系统:<input
                        readonly
                        v-model="operatingSystem"
                        class="inputCss"
                      />
                    </span>
                  </p>
                  <p class="flexStart">
                    <span>
                      数据库:<input
                        readonly
                        v-model="database"
                        class="inputCss"
                      />
                    </span>
                    <span>
                      中间件:<input
                        readonly
                        v-model="middleware"
                        class="inputCss"
                      />
                    </span>
                  </p>
                </td>
              </tr>
              <tr>
                <td class="bgtd">访问中组部网站/山东组织工作网情况</td>
                <td colspan="3">
                  <div style="float: left">
                    <p class="flexStart">
                      是否使用国产化计算机访问：
                      <el-checkbox-group
                        onclick="return false"
                        v-model="isLoacalizationPc"
                      >
                        <el-checkbox label="1">是</el-checkbox>
                        <el-checkbox label="0">否</el-checkbox>
                      </el-checkbox-group>
                    </p>
                    <p class="flexStart">
                      能否正常访问：
                      <el-checkbox-group onclick="return false" v-model="isOk">
                        <el-checkbox label="1">是</el-checkbox>
                        <el-checkbox label="0">否</el-checkbox>
                      </el-checkbox-group>
                      <span>
                        ， 问题：<el-input
                          readonly
                          v-model="reasonPc"
                          style="width: 400px"
                        />
                      </span>
                    </p>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="bgtd">国产化情况</td>
                <td colspan="3">
                  <div style="float: left">
                    <p class="flexStart">
                      是否国产化：
                      <el-checkbox-group
                        onclick="return false"
                        v-model="isLoacalization"
                      >
                        <el-checkbox label="1">是</el-checkbox>
                        <el-checkbox label="0">否</el-checkbox>
                      </el-checkbox-group>
                    </p>
                    <p class="flexStart">
                      能否正常访问：
                      <el-checkbox-group
                        onclick="return false"
                        v-model="isUsedOk"
                      >
                        <el-checkbox label="1">是</el-checkbox>
                        <el-checkbox label="0">否</el-checkbox>
                      </el-checkbox-group>
                      <span>
                        ，问题：<el-input
                          readonly
                          v-model="reasonLoac"
                          style="width: 400px"
                        />
                      </span>
                    </p>
                  </div>
                </td>
              </tr>
              <tr>
                <td
                  colspan="4"
                  style="text-align: left; font-size: 16px"
                  class="bgtd"
                >
                  二、电子邮件系统
                </td>
              </tr>
              <tr>
                <td class="bgtd">市级党委组织部邮件系统域名/IP</td>
                <td colspan="3">
                  <el-input readonly v-model="emailIp" />
                </td>
              </tr>
              <tr>
                <td class="bgtd">邮件系统名称/型号</td>
                <td><el-input readonly v-model="emailName" /></td>
                <td class="bgtd">管理制度</td>
                <td style="text-align: left">
                  <el-checkbox-group
                    onclick="return false"
                    v-model="emailIsManage"
                    @change="handlEmaileManageChange"
                  >
                    <el-checkbox label="1">有</el-checkbox>
                    <el-checkbox label="0">暂无</el-checkbox>
                  </el-checkbox-group>
                  <el-link
                    type="primary"
                    @click="hanldeClickTwo"
                    v-if="emailFlag"
                    >管理制度邮件附件</el-link
                  >
                </td>
              </tr>
              <tr>
                <td class="bgtd">邮件管理责任处室</td>
                <td><el-input readonly v-model="emailOrg" /></td>
                <td class="bgtd">联系人及电话</td>
                <td><el-input readonly v-model="personPhone" /></td>
              </tr>
              <tr>
                <td class="bgtd">开设邮箱数</td>
                <td><el-input readonly v-model="emailNum" /></td>
                <td class="bgtd">邮箱分配范围</td>
                <td>
                  <p style="display: flex; align-items: center">
                    市级：
                    <el-checkbox-group
                      onclick="return false"
                      v-model="emailCity"
                    >
                      <el-checkbox label="0">机构</el-checkbox>
                      <el-checkbox label="1">全员</el-checkbox>
                    </el-checkbox-group>
                  </p>
                  <p
                    style="display: flex; align-items: center; margin-top: 5px"
                  >
                    县级：
                    <el-checkbox-group
                      onclick="return false"
                      v-model="emailContry"
                    >
                      <el-checkbox label="0">机构</el-checkbox>
                      <el-checkbox label="1">全员</el-checkbox>
                    </el-checkbox-group>
                  </p>
                </td>
              </tr>
              <tr>
                <td class="bgtd">
                  访问中组部大组工网邮件系统/省委组织部组工网邮件系统情况
                </td>
                <td colspan="3">
                  <div style="float: left">
                    <p class="flexStart">
                      是否使用国产化计算机访问：
                      <el-checkbox-group
                        onclick="return false"
                        v-model="emailLocationPc"
                      >
                        <el-checkbox label="1">是</el-checkbox>
                        <el-checkbox label="0">否</el-checkbox>
                      </el-checkbox-group>
                    </p>
                    <p class="flexStart">
                      能否正常访问：
                      <el-checkbox-group
                        onclick="return false"
                        v-model="emailIsOk"
                      >
                        <el-checkbox label="1">是</el-checkbox>
                        <el-checkbox label="0">否</el-checkbox>
                      </el-checkbox-group>
                      <span>
                        ，问题：<el-input
                          readonly
                          v-model="emailReason"
                          style="width: 400px"
                      /></span>
                    </p>
                  </div>
                </td>
              </tr>
              <tr>
                <td
                  colspan="4"
                  style="text-align: left; font-size: 16px"
                  class="bgtd"
                >
                  三、问题建议
                </td>
              </tr>
              <tr style="height: 80px">
                <td colspan="4" style="text-align: left">
                  <el-input
                    readonly
                    type="textarea"
                    :rows="4"
                    v-model="remark"
                  />
                </td>
              </tr>
            </thead>
          </table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
  
  <script>
import {
  getInfoList,
  getOrgTree,
  dzgwNetEmail
} from "@/api/datacentersg/personnelPut/personnelPut.js";
import store from "@/store";
import { DOWN_FILE } from "@/api/office/file";
import webapp from "@/config/webapp";
class Photo {
  constructor(name, url) {
    this.name = name;
    this.url = url;
  }
}
export default {
  data() {
    return {
      fillingOrg: "",
      fillingPerson: "",
      fillingTel: "",
      netName: "",
      netIp: "",
      netArrange: "",
      netWay: "",
      isManage: [],
      netOrg: "",
      personName: "",
      jobPost: "",
      telPhone: "",
      phone: "",
      protectTime: "",
      netOmOrg: "",
      netOmOrgSecret: "",
      server: "",
      cpu: "",
      operatingSystem: "",
      database: "",
      middleware: "",
      isLoacalizationPc: [],
      isOk: [],
      reasonPc: "",
      isLoacalization: [],
      isUsedOk: [],
      reasonLoac: "",
      emailIp: "",
      emailName: "",
      emailIsManage: [],
      emailOrg: "",
      personPhone: "",
      emailNum: "",
      emailCity: [],
      emailContry: [],
      emailLocationPc: [],
      emailIsOk: [],
      emailReason: "",
      remark: "",
      uploadUrl: webapp.uploadUrl,
      fileMultiple: false,
      fileUrl: "",
      emailFile: "",
      fileEmailMultiple: false,
      fileManageList: [],
      fileEmailList: [],
      heightTree: window.innerHeight - 130 + "px",
      heightTable: window.innerHeight - 260 + "px",
      defaultProps: {
        children: "children",
        label: "name",
      },
      data: [],
      dataLabel: "",
      emailFlag: false,
      wzFlag: false,
    };
  },
  created() {
    this.getTree();
    this.$watch("dataLabel", (newVal, oldVal) => {
      if (newVal) {
        this.getList();
      } else {
        this.$message({
          message: "请先选择机构",
          type: "warning",
        });
      }
    });
    this.$watch("fileUrl", (newVal, oldVal) => {
      if (newVal) {
        this.wzFlag = true;
      } else {
        this.wzFlag = false;
      }
    });
    this.$watch("emailFile", (newVal, oldVal) => {
      if (newVal) {
        this.emailFlag = true;
      } else {
        this.emailFlag = false;
      }
    });
  },
  methods: {
    getTree() {
      const params = {
        userId: store.getters.user_id.toString(),
        token: store.getters.token.toString(),
      };
      getOrgTree(params).then((res) => {
        if (res.result) {
          this.data = res.resultdata;
        }
      });
    },
    getList() {
      this.clear();
      const params = {
        userId: store.getters.user_id.toString(),
        token: store.getters.token.toString(),
        type: "2",
        data: {
          organization: this.dataLabel,
        },
      };
      getInfoList(params).then((result) => {
        if (result.result) {
          this.id = result.resultdata[0].id;
          this.protectTime = result.resultdata[0].protectTime;
          this.netOmOrg = result.resultdata[0].netOmOrg;
          this.netOmOrgSecret = result.resultdata[0].netOmOrgSecret;
          this.server = result.resultdata[0].server;
          this.cpu = result.resultdata[0].cpu;
          this.operatingSystem = result.resultdata[0].operatingSystem;
          this.database = result.resultdata[0].database;
          this.middleware = result.resultdata[0].middleware;
          this.fillingOrg = result.resultdata[0].fillingOrg;
          this.fillingPerson = result.resultdata[0].fillingPerson;
          this.fillingTel = result.resultdata[0].fillingTel;
          this.netName = result.resultdata[0].netName;
          this.netIp = result.resultdata[0].netIp;
          this.netArrange = result.resultdata[0].netArrange;
          this.netWay = result.resultdata[0].netWay;
          this.netOrg = result.resultdata[0].netOrg;
          this.personName = result.resultdata[0].personName;
          this.jobPost = result.resultdata[0].jobPost;
          this.telPhone = result.resultdata[0].telPhone;
          this.phone = result.resultdata[0].phone;
          this.reasonPc = result.resultdata[0].reasonPc;
          this.reasonLoac = result.resultdata[0].reasonLoac;
          this.emailIp = result.resultdata[0].emailIp;
          this.emailName = result.resultdata[0].emailName;
          this.emailOrg = result.resultdata[0].emailOrg;
          this.personPhone = result.resultdata[0].personPhone;
          this.emailNum = result.resultdata[0].emailNum;
          this.emailReason = result.resultdata[0].emailReason;
          this.remark = result.resultdata[0].remark;
          this.fileUrl = result.resultdata[0].fileUrl;
          this.emailFile = result.resultdata[0].emailFile;
          const photoList = [];
          if (result.resultdata[0].fileUrl) {
            photoList.push(
              new Photo("管理制度网站附件", result.resultdata[0].fileUrl)
            );
          } else {
            this.fileManageList = [];
          }
          this.fileManageList = photoList;

          const photoListEmail = [];
          if (result.resultdata[0].emailFile) {
            photoListEmail.push(
              new Photo("管理制度邮件附件", result.resultdata[0].emailFile)
            );
          } else {
            this.fileEmailList = [];
          }
          this.fileEmailList = photoListEmail;
          this.isManage.push(String(result.resultdata[0].isManage));
          this.isLoacalizationPc = [];
          this.isLoacalizationPc.push(
            String(result.resultdata[0].isLoacalizationPc)
          );
          this.isOk = [];
          this.isOk.push(String(result.resultdata[0].isOk));
          this.isLoacalization = [];
          this.isLoacalization.push(
            String(result.resultdata[0].isLoacalization)
          );
          this.emailIsManage = [];
          this.emailIsManage.push(String(result.resultdata[0].emailIsManage));
          this.isUsedOk = [];
          this.isUsedOk.push(String(result.resultdata[0].isUsedOk));
          this.emailCity = [];
          this.emailCity.push(String(result.resultdata[0].emailCity));
          this.emailContry = [];
          this.emailContry.push(String(result.resultdata[0].emailContry));
          this.emailLocationPc = [];
          this.emailLocationPc.push(
            String(result.resultdata[0].emailLocationPc)
          );
          this.emailIsOk = [];
          this.emailIsOk.push(String(result.resultdata[0].emailIsOk));
        }
      });
    },
    handleNodeClick(data) {
      this.dataLabel = data.name;
    },
    downFile(data, fileName) {
      if (!data) {
        return;
      }
      if (typeof data === "string" && data.startsWith("http")) {
        // 判断是否是链接
        const iframe = document.createElement("iframe");
        iframe.style.display = "none";
        iframe.src = data;
        document.body.appendChild(iframe);
        setTimeout(() => {
          document.body.removeChild(iframe);
        }, 1000); // 等待 1 秒后销毁 iframe
      } else {
        const url = window.URL.createObjectURL(new Blob([data]));
        const a = document.createElement("a");
        a.style.display = "none";
        a.href = url;
        a.setAttribute("download", fileName);
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        window.URL.revokeObjectURL(url);
      }
    },
    // 导出
    handlExport() {
      const params = {
        userId: store.getters.user_id.toString(),
        token: store.getters.token.toString(),
        data: {
          organization: this.dataLabel,
        },
      };

      // 网站邮件导出
      dzgwNetEmail(params)
        .then((result) => {
          this.downFile(result.resultdata, "网络安全制度备案表"); // 调用downFile方法进行文件下载
        })
        .catch((error) => {
          console.log(error);
        });
    },
    hanldeClickOne() {
      if (this.fileUrl !== "") {
        window.open(this.fileUrl);
      }
    },
    hanldeClickTwo() {
      if (this.fileUrl !== "") {
        window.open(this.emailFile);
      }
    },
    handleCheckClassType(value) {
      console.log(value, "value");
    },
    handlePreviewEmail() {},
    uploadSuccessEmail() {},
    handlePreview() {},
    before_uploadEmail() {},
    before_upload() {},
    uploadSuccess() {},
    handlEmaileManageChange() {},
    clear() {
      this.fillingOrg = "";
      this.fillingPerson = "";
      this.fillingTel = "";
      this.netName = "";
      this.netIp = "";
      this.netArrange = "";
      this.netWay = "";
      this.isManage = [];
      this.netOrg = "";
      this.personName = "";
      this.jobPost = "";
      this.telPhone = "";
      this.phone = "";
      this.protectTime = "";
      this.netOmOrg = "";
      this.netOmOrgSecret = "";
      this.server = "";
      this.cpu = "";
      this.operatingSystem = "";
      this.database = "";
      this.middleware = "";
      this.isLoacalizationPc = [];
      this.isOk = [];
      this.reasonPc = "";
      this.isLoacalization = [];
      this.isUsedOk = [];
      this.reasonLoac = "";
      this.emailIp = "";
      this.emailName = "";
      this.emailIsManage = [];
      this.emailOrg = "";
      this.personPhone = "";
      this.emailNum = "";
      this.emailCity = [];
      this.emailContry = [];
      this.emailLocationPc = [];
      this.emailIsOk = [];
      this.emailReason = "";
      this.remark = "";
      this.fileUrl = "";
      this.emailFile = "";
      this.fileManageList = [];
      this.fileEmailList = [];
    },
  },
};
</script>
  
  <style scoped>
.el-col {
  border-radius: 4px;
  background: #fff;
}
.formWarp {
  box-shadow: 5px 5px 10px #eee;
  padding: 5px;
}
.infohead {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 20px 0px 20px 0px;
  font-family: SimHei;
}
.infohead p {
  font-size: 18px;
}
.inputVal {
  border: none;
  border-bottom: 1px solid #000;
  font-size: 16px;
  font-family: SimSun;
  color: #000;
  margin-left: 10px;
  text-align: center;
}
.inputCss {
  width: 200px;
  text-align: left;
  border: none;
  font-size: 16px;
  font-family: SimSun;
  border-bottom: 1px solid #000;
}
.tableWarp {
  scrollbar-color: #46a6ff #409eff;
}
.myTable {
  width: 100%;
  margin-bottom: 10px;
  border-spacing: 0;
  border: 1px solid #dcdfe6;
  font-family: SimHei;
}
.myTable .bgtd {
  background: #b0e2ff !important;
}
.myTable tbody {
  width: 100%;
}

.myTable td {
  word-wrap: break-word;
  font-size: 16px;
  padding: 5px 10px;
  text-align: center;
}
.classyang {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 5px;
}
>>> .el-input--small .el-input__inner {
  border: none;
  font-size: 16px;
  font-family: SimSun;
  color: #000;
}
>>> textarea.el-textarea__inner {
  border: none;
  font-size: 16px;
  font-family: SimSun;
  color: #000;
}
>>> .el-tree-node__label {
  font-size: 16px;
}
>>> .el-checkbox__label {
  font-size: 16px;
}
.flexStart {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 5px;
}
</style>